﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="图片 ,缩放 ,裁剪,open source, 开源邦 ,Java ,开源软件开发  "/>  
<meta name="description" content="开源邦 , 致力于开源实用软件的开发和推广"/>  
<title>开源邦 - 图片缩放裁剪</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link href="./css/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type=text/javascript src="./js/common.js"></script>
</head>

<body>

<div class="p_body">
<div class="header">
<div class="logo"><img src="./images/logo.jpg"  alt="openbang logo"/></div>

<div class="text">
        <li><a href="http://open-bang.appspot.com/accountPortal.jsp">我的帐户</a></li>
        <li><a href="http://open-bang.appspot.com/accountLogin.jsp">登录</a></li>
        <li><a href="http://www.openbang.net/songofbang.html">开源邦之歌</a></li>
        <li><a href="http://www.openbang.net/about.html">关于我们</a></li>
        <li><a href=http://www.openbang.net/en/about_us.html>english</a></li>
</div>
<div class="h_15"></div>
<div id="container">
<ul id="nav">
<li><a href="index.html">首页</a></li>

<li><a href="product_1.html" class="daddy">产品</a> </li>
<li><a href="service.html">服务</a></li>
<li><a href="download.html">下载</a></li>
<li><a href="demo.html">演示</a></li>

<li><a href="memlist.html">会员列表</a></li>
<li><a href="getInvolved.html">我要参与</a></li>
    <li><a href="http://openbang.group.javaeye.com/">论坛</a></li>

</ul>
</div>

<div class="box"></div>

</div>

<div class="main">

<div class="content">

<div class="content_left_g">
<div class="left_top">目录</div>
<div>
  
 <div class="txt">
 <ul>
 <li><a href="#gaishu">概述</a></li>
        <li><a href="./download/GwtCropImg.rar">下载</a></li>
        <li><a href="#doc">在线文档</a></li>
        <li><a href="./demo/cropimg/GwtCropImg.html"  target="_demo">在线演示</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">BUG</a></li>
        <li><a href="#">开发进度</a></li>
        <li><a href="#">邮件列表</a></li>
        <li><a href="#">开发者信息</a></li>
        <li><a href="#RoadMap">RoadMap</a></li>
        <li><a href="#">版本日志</a></li>
 </ul>
 
 </div> 


</div>
</div>
<div class="content_centent">
<div class="main_top_p">
<div class="ptop">位置：产品-图片缩放裁剪</div>

<p class="ptext">1.概述<a name="gaishu"/></p>
<p>近两年来,很多社交网站对图片上传都提供了缩放和剪裁的功能.有些使用Flash实现，有些使用DHTML+JavaScript实现.</p>
<p>实现该功能并不是很复杂,开源邦成员也有一个基于GWT来开发的图像缩放和剪裁的小组件，特此把前端部分源码公开.考虑到后端大家都比较容易实现，因此不在此公开.</p>

<p class="ptext">2.在线演示<a name="demo"/></p>
<p>本组件是纯的HTML+JavaScript,请单击<a href="./demo/cropimg/GwtCropImg.html" target="_demo">在线演示</a>即可试用.</p>

<p class="ptext">3.下载<a name="download"/></p>
<p>下载包是一个rar压缩文件,里面包含了GWT的源代码和演示用的HTML和CSS文件。</p>
<p>请单击<a href="./download/GwtCropImg.rar">下载</a>[update date: 2010-02-22, size 93KB]后，解压即可.</p>

<p class="ptext">4.文档<a name="doc"/></p>
<p>一、开发环境</p>
&nbsp;&nbsp;&nbsp;&nbsp;JDK1.6<br/>
&nbsp;&nbsp;&nbsp;&nbsp;Eclipse3.5<br/>
&nbsp;&nbsp;&nbsp;&nbsp;   GWT2.0.2<br/>
&nbsp;&nbsp;&nbsp;&nbsp;  Google Plusin for Eclipse 1.20<br/>

<p>二、部署代码说明</p>
&nbsp;&nbsp;&nbsp;&nbsp;1. war/GwtCropImg.html  运行页面文件<br/>
&nbsp;&nbsp;&nbsp;&nbsp;2. war/GwtCropImg.css   CSS样式文件  <br/>
&nbsp;&nbsp;&nbsp;&nbsp;3. war/gwtcropimg       javascript文件所在的目录(包括了支持不同浏览器的js文件)<br/>

<p>三、开发源代码说明</p>
&nbsp;&nbsp;&nbsp;&nbsp;1. src/openbang.web.cropimg.client/GwtCropImg.java 基于GWT编写的Java代码,编译后结果为gwtcropimg目录下的js文件.<br/>
&nbsp;&nbsp;&nbsp;&nbsp;2. src/openbang.web.cropimg/GwtCropImg.gwt.xml     GWT模块的声明文件<br/>

<p>四、实现算法</p>
&nbsp;&nbsp;&nbsp;&nbsp;1.在   GwtCropImg.html 中通过各种文本框放置缩放剪裁图片的相关属性<br/>
&nbsp;&nbsp;&nbsp;&nbsp;2.在   GwtCropImg.html 中只需要声明一个DIV(id=openbangimg_action_div),让 gwtcropimg目录下的JavaScript来控制图片的显示、缩放和拖动<br/>
&nbsp;&nbsp;&nbsp;&nbsp;    操作区是一个 AbsolutePanel (绝对位置的DIV)<br/>
&nbsp;&nbsp;&nbsp;&nbsp;  AbsolutePanel先放入图片(img对象)<br/>
&nbsp;&nbsp;&nbsp;&nbsp;  AbsolutePanel最后放入透明层(Table,实现四周半透明,中间区域透明)<br/>
&nbsp;&nbsp;&nbsp;&nbsp;3.图片的缩放,利用  img 的width,height来实现<br/>
&nbsp;&nbsp;&nbsp;&nbsp;4.图片的拖动,利用  透明层响应鼠标拖动的偏移量,重置img在   AbsolutePanel的起始位置.<br/>

<p>五、使用说明</p>
&nbsp;&nbsp;&nbsp;&nbsp;当您想把图片的显示、缩放、拖动功能加入您的应用程序中<br/>
&nbsp;&nbsp;&nbsp;&nbsp;1. 仿照GwtCropImg.html,修改您的代码<br/>
&nbsp;&nbsp;&nbsp;&nbsp;2. 必须引入 <code><script type="text/javascript" language="javascript" src="gwtcropimg/gwtcropimg.nocache.js"></script></code><br/>
&nbsp;&nbsp;&nbsp;&nbsp;3. 必须保留页面中id以openbang开头的元素，并且不能改名.<br/>
&nbsp;&nbsp;&nbsp;&nbsp;4. 这些id以openbang开头的元素中，button元素必须是button,不能改为intpu type=button, 文本框(type=text)和隐藏框(type=hidden)则可以根据需要互换<br/>
&nbsp;&nbsp;&nbsp;&nbsp;5. GwtCropImg.html的javascript声明中,必须保留 openbangGetImgFileUrl方法.<br/>
&nbsp;&nbsp;&nbsp;&nbsp;6. 所有元素遵守以上规则后，位置和样式可以自由设置.<br/>

<p class="ptext">5.RoadMap<a name="RoadMap"/></p>
<p>该组件没有具体的开发计划</p>
<p>欢迎感兴趣的开发人员参与进来继续优化</p>

</div>


</div>
<div class="content_right1">
<!-- google 广告 begin-->
<script type="text/javascript"><!--
google_ad_client = "pub-9584392318741327";
//200x200, 创建于 10-1-11
google_ad_slot = "8932861741";
google_ad_width = 200;
google_ad_height = 200;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>             
            <!-- google 广告 end--> 
<div class="h_5"></div>
</div>

</div>

<div class="baner">
<!-- google 广告 begin-->
<script type="text/javascript"><!--
google_ad_client = "pub-9584392318741327";
/* 728x90, 创建于 10-1-11 */
google_ad_slot = "6311670819";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!-- google 广告 end-->
	
</div>

</div>

<div class="footer">

<div class="bottom">
<ul>
<li><a href="./help.html">帮助</a></li>
<li><a href="./about.html#contract">联系方式</a></li>
<li><a href="friend_links.html">友情链接</a></li>
<li><a href="./about.html">关于我们</a></li>
<li><a href="#" onclick="sendMail()">网站问题</a></li>

</ul>

</div>

<span>© 2010-2013 openbang.net. 开源邦版权所有 [<a href="http://www.miibeian.gov.cn">京ICP备10013529号 </a>]<script src="http://s57.cnzz.com/stat.php?id=1915272&web_id=1915272&show=pic" language="JavaScript"></script></span>


</div>

</div>
</body>
</html>
